<!-- 改变字体大小
emit[changeSize]   字体大小值
-->
<template>
    <div class="user-header">
        <el-dropdown @command="handerCommand">
            <span class="el-dropdown-link">
                <el-button class="iconfont icon-ziti" />
            </span>
            <template #dropdown>
                <el-dropdown-item :command="0">大</el-dropdown-item>
                <el-dropdown-item :command="1">中</el-dropdown-item>
                <el-dropdown-item :command="2">小</el-dropdown-item>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const emit = defineEmits<{ (e: 'changeSize', dimension: string): void }>();

// 默认default
const dimension = ref('default')

/**
 * 根据e,使用switch判断使用哪种字体大小
 * @param e 字体大小
 */
const handerCommand = (e: number) => {    
    switch (e) {
        // 大
        case 0:
            dimension.value = "large"
            ElMessage.success('字体：大')
            break;
        // 中
        case 1:
            dimension.value = "default"
            ElMessage.success('字体：中')
            break;
        // 小
        case 2:
            dimension.value = "small"
            ElMessage.success('字体：小')
            break;
        default:
            break;
    }
}

// 监听dimension的变化并传递给父组件
watch(dimension, (dimension) => {
    emit("changeSize", dimension)
    localStorage.setItem('fontsize',dimension||'default')
})

</script>

<style scoped>
.el-button{
    padding: 0;
}
</style>
 